<template>
<div class="app-container calendar-list-container">
  <div class="filter-container">
    <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="商品名称" v-model="listQuery.goodsName"> </el-input>
    <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="店铺名称" v-model="listQuery.shopsName"> </el-input>
    <el-select class="filter-item" v-model="listQuery.promotionType" placeholder="请选择推荐位置">
        <el-option v-for="item in typeOptions" :key="item.promotionType" :label="item.typeName" :value="item.promotionType"></el-option>
    </el-select>
    <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
    <el-button v-if="promotionManager_btn_del" class="filter-item" type="danger" v-waves icon="delete" @click="handleDeleteBatch">批量删除</el-button>
  </div>
  <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column v-if="promotionManager_btn_del" type="selection" min-width="5%"> 
    </el-table-column>
    <el-table-column align="center" label="序号" min-width="5%"> 
      <template scope="scope">
        <span>{{scope.row.promotionId}}</span>
        </template> 
    </el-table-column>
    <el-table-column min-width="15%" align="center" label="推荐图片"> 
      <template scope="scope">
          <img v-if="scope.row.promotionImage" :src="imgBaseURL + scope.row.promotionImage" min-width="70" height="70">
      </template> 
    </el-table-column>
    <el-table-column min-width="20%" align="center" label="商品名称"> 
      <template scope="scope">
        <span>{{scope.row.simpleTitle}}</span>
      </template> 
    </el-table-column>
    <el-table-column min-width="10%" align="center" label="店铺名称"> 
      <template scope="scope">
        <span>{{scope.row.shopName}}</span>
      </template> 
    </el-table-column>    
    <el-table-column min-width="10%" align="center" label="推荐位置"> 
      <template scope="scope">
        <span>{{scope.row.promotionTypeName}}</span>
      </template> 
    </el-table-column>
    <el-table-column min-width="10%" align="center" label="价格"> 
      <template scope="scope">
        <span>{{scope.row.price | currency('￥')}}</span>
      </template> 
    </el-table-column>
    <el-table-column min-width="10%" align="center" label="排序"> 
      <template scope="scope">
        <span>{{scope.row.dispOrder}}</span>
      </template> 
    </el-table-column>
    <el-table-column align="center" label="操作" min-width="15%"> 
      <template scope="scope">
        <el-button v-if="promotionManager_btn_edit" size="small" type="success" @click="handleUpdate(scope.row)">编辑
        </el-button>
        <el-button v-if="promotionManager_btn_del" size="small" type="danger" @click="handleDelete(scope.row)">删除
        </el-button>
      </template> 
    </el-table-column>
  </el-table>
  <div v-show="!listLoading" class="pagination-container">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
  </div>
  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
    <goods-promotion :promotionId="currentId" @closePromotionDialog="closePromotionDialog" @getList="getList" ref="promotionDialog"></goods-promotion>
  </el-dialog>
</div>
</template>
<script>
import {
  page,
  addObj,
  getObj,
  delObj,
  delObjBatch,
  putObj,
  getPromotionTypeList
} from 'api/shop/goods/promotion/index';
import { mapGetters } from 'vuex';
import {currency} from '@/utils/index';
export default {
  name: 'promotion',
  components: {
    'goods-promotion': () => import('./components/promotionDialog')
  },  
  data() {
    return {
      imgBaseURL: this.GLOBAL.imgBaseURL,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        goodsName: undefined,
        shopsName: undefined,
        promotionType: undefined,
        orderBy: undefined
      },
      typeOptions: [],
      checkBoxData: [],
      dialogStatus: '',
      promotionManager_btn_edit: false,
      promotionManager_btn_del: false,
      promotionManager_btn_add: false,
      textMap: {
        update: '编辑',
        create: '创建'
      },
      tableKey: 0,
      currentId: -1,
      dialogFormVisible: false
    }
  },
  created() {
    this.getList();
    this.getPromotionTypeList();
    this.promotionManager_btn_edit = this.elements['promotionManager:btn_edit'];
    this.promotionManager_btn_del = this.elements['promotionManager:btn_del'];
    this.promotionManager_btn_add = this.elements['promotionManager:btn_add'];
    // console.log(this.elements);
  },
  filters:{
    currency: currency
  },  
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  methods: {
    getList() {
      this.listLoading = true;
      page(this.listQuery)
        .then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
          this.listLoading = false;
        })
    },
    getPromotionTypeList() {
      getPromotionTypeList()
        .then(response => {
          this.typeOptions = response.data;
        })
    },    
    handleFilter() {
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleSelectionChange(val, row) {
      // console.log(val);
      this.checkBoxData = val;
    },    
    handleUpdate(row) {
      this.currentId = row.promotionId;
      this.dialogFormVisible = true;
      this.dialogStatus = 'update';
      setTimeout(() => {
        this.$refs.promotionDialog.promotionId = row.promotionId;
        this.$refs.promotionDialog.dialogStatus = 'update';
        this.$refs.promotionDialog.getFormData();
      },0);
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          delObj(row.promotionId).then(() => {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000
              });
              const index = this.list.indexOf(row);
              this.list.splice(index, 1);
            });
        });
    },
    handleDeleteBatch(){
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          const ids = [];
          if(this.checkBoxData && this.checkBoxData.length){
              this.checkBoxData.forEach((item, index) => {
                ids.push(item.promotionId);
              });
              delObjBatch(ids.join())
              .then(() => {
                this.$notify({
                  title: '成功',
                  message: '删除成功',
                  type: 'success',
                  duration: 2000
                });
                this.getList();
              });
          }
          else{
            this.$message.error('请选择需要删除的行');
          } 
        });      
    },
    closePromotionDialog() {
      this.dialogFormVisible = false;
    }
  }
}
</script>